<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<meta name="renderer" content="webkit">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>网格 | 基础</title>
    <link rel="stylesheet" href="../../assets/dest/css/basic_reset.css">
    <link rel="stylesheet" href="../../assets/dest/css/basic_font.css">
	<link rel="stylesheet" href="../../assets/dest/css/basic_grid.css">
	<link rel="stylesheet" href="../demo-lib/doc.css">
	<style>
		pre, .mainbox .grid-content {line-height:1.6; font-size:13px; font-family:consolas;}
        .mainbox {
			padding:0 20px 10px;
			margin-bottom: 20px;
            border:1px solid #eaeefb;
        }
        .mainbox > h2 {margin:20px 0 10px; font-size:20px;}
        .mainbox .l-grid-row {margin-bottom:10px;}
        .mainbox .grid-content {line-height:36px; text-align:center; color:#fff; background:#69c;}
        .l-grid-row > .l-grid-col:nth-child(odd) > .grid-content {background: #9cb2d2}

        #gridOverflow > .l-grid-col {margin-bottom:10px;}
	</style>
</head>
<body>
	<div class="header">
		<dl>
			<dt>项目：</dt>
			<dd>网格（栅格）</dd>
			<dt>描述：</dt>
			<dd>实现基本布局的网格系统。</dd>
			<dt>资源：</dt>
			<dd>
				<code>basic_reset.css</code>
				<code>basic_grid.css</code>
			</dd>
		</dl>
	</div>
	<div class="mainbox">
		<h2>全部栅格：</h2>
		<div id="allGrids"></div>
		<h2>水平铺满：</h2>
		<div class="l-grid">
			<div class="l-grid-row">
				<div class="l-grid-col l-grid-col-3">
					<div class="grid-content">col-3</div>
				</div>
				<div class="l-grid-col l-grid-col-3">
					<div class="grid-content">col-3</div>
				</div>
				<div class="l-grid-col l-grid-col-3">
					<div class="grid-content">col-3</div>
				</div>
				<div class="l-grid-col l-grid-col-3">
					<div class="grid-content">col-3</div>
				</div>
			</div>
		</div>
		<h2>两端对齐（元素有内边距）：</h2>
		<div class="l-grid">
			<div class="l-grid-row has-space">
				<div class="l-grid-col l-grid-col-3">
					<div class="grid-content">col-3</div>
				</div>
				<div class="l-grid-col l-grid-col-3">
					<div class="grid-content">col-3</div>
				</div>
				<div class="l-grid-col l-grid-col-3">
					<div class="grid-content">col-3</div>
				</div>
				<div class="l-grid-col l-grid-col-3">
					<div class="grid-content">col-3</div>
				</div>
			</div>
		</div>
		<h2>自由搭配（溢出自动换行）：</h2>
		<div class="l-grid">
			<div class="l-grid-row has-space" id="gridOverflow">
				<div class="l-grid-col l-grid-col-1">
					<div class="grid-content">col-1</div>
				</div>
				<div class="l-grid-col l-grid-col-2">
					<div class="grid-content">col-2</div>
				</div>
				<div class="l-grid-col l-grid-col-3">
					<div class="grid-content">col-3</div>
				</div>
				<div class="l-grid-col l-grid-col-4">
					<div class="grid-content">col-4</div>
				</div>
				<div class="l-grid-col l-grid-col-2">
					<div class="grid-content">col-2</div>
				</div>
				<div class="l-grid-col l-grid-col-5">
					<div class="grid-content">col-5</div>
				</div>
				<div class="l-grid-col l-grid-col-6">
					<div class="grid-content">col-6</div>
				</div>
				<div class="l-grid-col l-grid-col-1">
					<div class="grid-content">col-1</div>
				</div>
				<div class="l-grid-col l-grid-col-7">
					<div class="grid-content">col-7</div>
				</div>
				<div class="l-grid-col l-grid-col-5">
					<div class="grid-content">col-5</div>
				</div>
			</div>
		</div>
		<pre id="gridRules" style="padding-left:40px"></pre>
	</div>
	<script>
		var gridCols = 12;  // 栅格数
		var pre = '.l-grid-col-';
		var style = '<div>' + gridCols + '栅格系统：</div>';  // 标题
		var html = '';

		// 根据 12 栅格换算百分比宽度
		var returnWt = function(colIdx) {
			var result = 100 / (gridCols / colIdx);
			if (String(result).indexOf('.') > 0) {
				result = parseFloat(result.toFixed(5));
			}
			return result + '%';
		};

		var buildGrid = function(cols) {
			return '<div class="l-grid-col l-grid-col-' + cols + '">' +
				'<div class="grid-content">col-' + cols + '</div>' +
				'</div>';
		};

		for (var i = 0; i < gridCols; i++) {
			var idx = i + 1;
			style += pre + idx + ' {width:' + returnWt(idx) + ';}' + (i == gridCols ? '' : '<br/>');

			html += '<div class="l-grid-row">' + buildGrid(gridCols - i);
			if (i > 0) {
				html += buildGrid(i);
			}

			html += '</div>';
		}

		document.getElementById('gridRules').innerHTML = style;
		document.getElementById('allGrids').innerHTML = html;
	</script>
</body>
</html>
